<template>
	<view class="ai-chat-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="user-info">
				<image class="avatar" src="/static/avatar-default.png"></image>
				<text class="welcome">AI智能助手</text>
			</view>
			<view class="chat-actions">
				<view class="action-icon" @click="clearChat">🗑️</view>
				<view class="action-icon" @click="showHelp">❓</view>
			</view>
		</view>

		<!-- 聊天内容区 -->
		<scroll-view scroll-y class="chat-content" :scroll-top="scrollTop" @scrolltolower="onScrollToLower"
			:scroll-with-animation="true" :show-scrollbar="false" ref="chatScroll">
			<!-- 欢迎消息 -->
			<view class="welcome-section">
				<image class="welcome-logo" src="/static/ai-assistant.png"></image>
				<text class="welcome-title">生命故事盒子 AI助手</text>
				<text class="welcome-desc">我可以帮助您记录生命故事、提供照护建议、回答临终关怀相关问题</text>
			</view>

			<!-- 建议问题 -->
			<view class="suggestion-section">
				<text class="suggestion-title">您可以这样问我</text>
				<view class="suggestion-list">
					<view class="suggestion-item" @click="askSuggestion('如何帮助患者缓解疼痛？')">
						<text>如何帮助患者缓解疼痛？</text>
					</view>
					<view class="suggestion-item" @click="askSuggestion('怎样与临终患者进行有效沟通？')">
						<text>怎样与临终患者进行有效沟通？</text>
					</view>
					<view class="suggestion-item" @click="askSuggestion('帮我记录一个关于患者的美好回忆')">
						<text>帮我记录一个关于患者的美好回忆</text>
					</view>
					<view class="suggestion-item" @click="askSuggestion('如何处理自己的悲伤情绪？')">
						<text>如何处理自己的悲伤情绪？</text>
					</view>
				</view>
			</view>

			<!-- 聊天消息 -->
			<view class="message-list">
				<view v-for="(msg, index) in messages" :key="index"
					:class="['message-item', msg.type === 'user' ? 'user-message' : 'ai-message']">
					<image class="message-avatar"
						:src="msg.type === 'user' ? '/static/avatar-default.png' : '/static/ai-avatar.png'"></image>
					<view class="message-bubble">
						<text class="message-text">{{ msg.content }}</text>
						<text class="message-time">{{ msg.time }}</text>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="isLoading" class="loading-more">
				<text>AI正在思考...</text>
			</view>
		</scroll-view>

		<!-- 底部输入区 -->
		<view class="input-section">
			<view class="input-box">
				<textarea class="input-textarea" v-model="inputMessage" placeholder="输入您想问的问题" auto-height />
				<view class="input-actions">
					<view class="action-btn voice" @click="toggleVoiceInput">
						<text class="action-icon">🎤</text>
					</view>
					<view class="action-btn send" @click="sendMessage">
						<text class="action-icon">📤</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 语音输入弹窗 -->
		<view v-if="showVoiceInput" class="voice-input-modal">
			<view class="voice-input-content">
				<view class="voice-wave" :class="{ recording: isRecording }">
					<view class="wave-item" v-for="i in 5" :key="i"></view>
				</view>
				<text class="voice-tip">{{ isRecording ? '正在录音...' : '点击开始录音' }}</text>
				<view class="voice-actions">
					<view class="voice-btn cancel" @click="cancelVoiceInput">取消</view>
					<view class="voice-btn record" @click="toggleRecording">
						{{ isRecording ? '停止' : '开始' }}
					</view>
					<view class="voice-btn confirm" @click="confirmVoiceInput" :class="{ disabled: !hasRecorded }">确定
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @click="navigateTo('/pages/family/index')">
				<view class="tab-icon">🏠</view>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/patientStatus')">
				<view class="tab-icon">📊</view>
				<text class="tab-text">患者状态</text>
			</view>
			<view class="tab-item active">
				<view class="tab-icon">💬</view>
				<text class="tab-text">AI对话</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/profile')">
				<view class="tab-icon">👤</view>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messages: [],
			inputMessage: '',
			scrollTop: 0,
			isLoading: false,
			showVoiceInput: false,
			isRecording: false,
			hasRecorded: false
		}
	},
	methods: {
		navigateTo(url) {
			// 判断是否是底部导航栏的页面
			if (url.includes('/pages/family/index') ||
				url.includes('/pages/family/patientStatus') ||
				url.includes('/pages/family/aiChat') ||
				url.includes('/pages/family/profile')) {
				uni.switchTab({
					url: url
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		// 发送消息
		sendMessage() {
			if (!this.inputMessage.trim()) return;

			// 添加用户消息
			this.addMessage(this.inputMessage, 'user');
			const userMessage = this.inputMessage;
			this.inputMessage = '';

			// 模拟AI回复
			this.isLoading = true;
			setTimeout(() => {
				this.isLoading = false;
				this.addMessage(this.getAIResponse(userMessage), 'ai');
			}, 1000);
		},
		// 添加消息到列表
		addMessage(content, type) {
			const now = new Date();
			const hours = now.getHours().toString().padStart(2, '0');
			const minutes = now.getMinutes().toString().padStart(2, '0');

			this.messages.push({
				content: content,
				type: type,
				time: `${hours}:${minutes}`
			});

			// 滚动到底部
			this.$nextTick(() => {
				this.scrollToBottom();
			});
		},
		// 滚动到底部
		scrollToBottom() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.chat-content').boundingClientRect();
			query.selectAll('.message-item').boundingClientRect();
			query.exec(res => {
				if (res[0] && res[1] && res[1].length > 0) {
					let totalHeight = 0;
					res[1].forEach(item => {
						totalHeight += item.height;
					});
					this.scrollTop = totalHeight;
				}
			});
		},
		// 模拟AI回复
		getAIResponse(userMessage) {
			// 简单的回复逻辑，实际项目中应该调用API
			if (userMessage.includes('疼痛')) {
				return '缓解患者疼痛可以通过以下方式：\n1. 按时给药，遵医嘱用药\n2. 按摩缓解肌肉紧张\n3. 使用热敷或冷敷\n4. 转移注意力，如音乐疗法\n5. 保持舒适的体位\n如需更专业的建议，请咨询医护人员。';
			} else if (userMessage.includes('沟通')) {
				return '与临终患者沟通的建议：\n1. 保持真诚和耐心\n2. 使用简单清晰的语言\n3. 多倾听，少打断\n4. 尊重患者的感受和选择\n5. 适当使用肢体语言表达关爱\n6. 不要强迫患者谈论不愿提及的话题';
			} else if (userMessage.includes('记录') || userMessage.includes('回忆')) {
				return '我可以帮您记录关于患者的回忆。请您分享：\n- 一个特别的时刻或故事\n- 患者的性格特点\n- 患者的爱好或特长\n- 您与患者之间的美好记忆\n分享后，我会将其整理成文字记录。';
			} else if (userMessage.includes('悲伤') || userMessage.includes('情绪')) {
				return '处理悲伤情绪的建议：\n1. 允许自己感受悲伤，不要压抑\n2. 寻求亲友或专业人士的支持\n3. 保持规律的生活和休息\n4. 适当参与社交活动\n5. 尝试写日记或绘画表达情感\n6. 参加哀伤辅导或支持小组\n记住，悲伤是正常的情绪反应，需要时间来调适。';
			} else {
				return '感谢您的提问。作为生命故事盒子的AI助手，我可以帮助您：\n- 提供临终关怀相关知识\n- 记录患者的生命故事和回忆\n- 给予照护者心理支持和建议\n- 解答关于五道人生的问题\n请告诉我您需要什么帮助？';
			}
		},
		// 点击建议问题
		askSuggestion(question) {
			this.inputMessage = question;
			this.sendMessage();
		},
		// 清空聊天记录
		clearChat() {
			uni.showModal({
				title: '提示',
				content: '确定要清空所有聊天记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.messages = [];
					}
				}
			});
		},
		// 显示帮助信息
		showHelp() {
			uni.showModal({
				title: 'AI助手使用帮助',
				content: '1. 您可以询问临终关怀相关问题\n2. 可以记录患者的生命故事\n3. 获取照护建议和心理支持\n4. 支持文字和语音输入\n5. 对话内容会保存在本地',
				showCancel: false
			});
		},
		// 滚动加载更多
		onScrollToLower() {
			// 实际项目中可以在这里加载历史消息
			console.log('滚动到顶部，可以加载更多历史消息');
		},
		// 切换语音输入
		toggleVoiceInput() {
			this.showVoiceInput = !this.showVoiceInput;
			this.isRecording = false;
			this.hasRecorded = false;
		},
		// 取消语音输入
		cancelVoiceInput() {
			this.showVoiceInput = false;
			this.isRecording = false;
		},
		// 切换录音状态
		toggleRecording() {
			this.isRecording = !this.isRecording;

			if (this.isRecording) {
				// 开始录音
				console.log('开始录音');
				// 实际项目中应调用录音API
				// 模拟录音过程
				setTimeout(() => {
					if (this.isRecording) {
						this.hasRecorded = true;
					}
				}, 1000);
			} else {
				// 停止录音
				console.log('停止录音');
				this.hasRecorded = true;
			}
		},
		// 确认语音输入
		confirmVoiceInput() {
			if (!this.hasRecorded) return;

			// 模拟语音识别结果
			this.inputMessage = '这是一段语音转文字的内容';
			this.showVoiceInput = false;
			this.isRecording = false;

			// 实际项目中应处理语音识别结果
			// this.sendMessage();
		}
	}
}
</script>

<style>
.ai-chat-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
	padding: 20rpx 30rpx;
	background-color: #52c41a;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
	background-color: #fff;
}

.welcome {
	font-size: 32rpx;
}

.chat-actions {
	display: flex;
}

.action-icon {
	font-size: 36rpx;
	margin-left: 30rpx;
}

/* 聊天内容区样式 */
.chat-content {
	flex: 1;
	padding: 30rpx;
	overflow-y: auto;
}

/* 欢迎区域样式 */
.welcome-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
}

.welcome-logo {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-bottom: 20rpx;
	background-color: #52c41a;
}

.welcome-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.welcome-desc {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	line-height: 1.5;
}

/* 建议问题样式 */
.suggestion-section {
	margin: 20rpx 0 40rpx;
}

.suggestion-title {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 20rpx;
	display: block;
}

.suggestion-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.suggestion-item {
	width: 48%;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
	color: #333;
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
}

/* 消息列表样式 */
.message-list {
	display: flex;
	flex-direction: column;
}

.message-item {
	display: flex;
	margin-bottom: 30rpx;
	max-width: 80%;
}

.user-message {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.ai-message {
	align-self: flex-start;
}

.message-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin: 0 20rpx;
}

.message-bubble {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	position: relative;
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
}

.user-message .message-bubble {
	background-color: #52c41a;
	color: #fff;
}

.message-text {
	font-size: 30rpx;
	line-height: 1.5;
	word-break: break-all;
	white-space: pre-wrap;
}

.message-time {
	font-size: 22rpx;
	color: #999;
	margin-top: 10rpx;
	display: block;
	text-align: right;
}

.user-message .message-time {
	color: rgba(255, 255, 255, 0.8);
}

/* 加载更多样式 */
.loading-more {
	text-align: center;
	padding: 20rpx 0;
	font-size: 26rpx;
	color: #999;
}

/* 底部输入区样式 */
.input-section {
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #eee;
}

.input-box {
	display: flex;
	align-items: flex-end;
}

.input-textarea {
	flex: 1;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	padding: 20rpx;
	min-height: 80rpx;
	max-height: 200rpx;
	font-size: 28rpx;
}

.input-actions {
	display: flex;
	margin-left: 20rpx;
}

.action-btn {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 20rpx;
}

.action-btn.voice {
	background-color: #f5f5f5;
}

.action-btn.send {
	background-color: #52c41a;
	color: #fff;
}

.action-icon {
	font-size: 40rpx;
}

/* 语音输入弹窗样式 */
.voice-input-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.voice-input-content {
	width: 80%;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.voice-wave {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
}

.wave-item {
	width: 10rpx;
	height: 20rpx;
	background-color: #52c41a;
	margin: 0 5rpx;
	border-radius: 5rpx;
}

.voice-wave.recording .wave-item {
	animation: waveAnimation 1s infinite ease-in-out;
}

.voice-wave.recording .wave-item:nth-child(1) {
	animation-delay: 0.0s;
}

.voice-wave.recording .wave-item:nth-child(2) {
	animation-delay: 0.2s;
}

.voice-wave.recording .wave-item:nth-child(3) {
	animation-delay: 0.4s;
}

.voice-wave.recording .wave-item:nth-child(4) {
	animation-delay: 0.6s;
}

.voice-wave.recording .wave-item:nth-child(5) {
	animation-delay: 0.8s;
}

@keyframes waveAnimation {

	0%,
	100% {
		height: 20rpx;
	}

	50% {
		height: 80rpx;
	}
}

.voice-tip {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 40rpx;
}

.voice-actions {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.voice-btn {
	padding: 15rpx 30rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
}

.voice-btn.cancel {
	background-color: #f5f5f5;
	color: #666;
}

.voice-btn.record {
	background-color: #52c41a;
}
</style>